<!--
 * @Date: 2025-02-02 19:45:16
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2025-02-05 17:58:51
 * @FilePath: /vue3-admin/src/views/common/DashboardView/DashboardView.vue
-->

<script setup lang="ts">
import CustomCard from '@/components/ui/CustomCard/CustomCard.vue';
import CustomChart from '@/components/ui/CustomChart/CustomChart.vue';
import { useJianBao } from './useJianBao';
import { usePinlv } from './usePinlv';
import { useRank } from './useRank';

import { Top, Bottom } from '@element-plus/icons-vue';
const { title: jianbaoTitle, jianbaoImg, list: jianbaoList } = useJianBao();

const { title: pinlvTitle, pinlvImg, chartOption, chartData } = usePinlv();
const { title: rankTitle, rankImg, list: rankList } = useRank();
</script>

<template>
    <div class="page-container">
        <CustomCard title="" class="mb">
            <template #title>
                <div class="flex-row ai-center">
                    <img
                        :src="jianbaoImg"
                        class="mr-[8px]"
                        style="width: 16px; height: 16px"
                    />
                    <div class="f18 c-1A1A1A">
                        {{ jianbaoTitle }}
                    </div>
                </div>
            </template>

            <el-row :gutter="16" style="margin-bottom: -16px">
                <el-col
                    :span="6"
                    v-for="(item, index) in jianbaoList"
                    :key="index"
                >
                    <div class="card">
                        <div class="c-475669 f18 fw700 mb8">
                            {{ item.title }}
                        </div>
                        <div class="flex-row ai-center">
                            <div class="c-35404F f24 fw700">
                                {{ item.value }}
                            </div>
                            <span
                                class="c-475669 f14 ml5"
                                v-if="item.diffStr"
                                >{{ item.diffStr }}</span
                            >
                            <template v-if="item.diff">
                                <span
                                    class="c-4876F9 f14 ml5"
                                    v-if="item.diff > 0"
                                    >+{{ item.diff }}%<el-icon class="ml8"
                                        ><Top /></el-icon
                                ></span>
                                <span class="c-FA5050 f14 ml5" v-else
                                    >{{ item.diff }}%<el-icon
                                        ><Bottom /></el-icon
                                ></span>
                            </template>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </CustomCard>

        <CustomCard title="" class="mb">
            <template #title>
                <div class="flex-row ai-center">
                    <img
                        :src="pinlvImg"
                        class="mr-[8px]"
                        style="width: 16px; height: 16px"
                    />
                    <div class="f18 c-1A1A1A">
                        {{ pinlvTitle }}
                    </div>
                </div>
            </template>

            <CustomChart
                style="height: 343px"
                :extraOption="chartOption"
                :datasetSource="chartData"
            />
        </CustomCard>

        <CustomCard title="" class="mb">
            <template #title>
                <div class="flex-row ai-center">
                    <img
                        :src="rankImg"
                        class="mr-[8px]"
                        style="width: 16px; height: 16px"
                    />
                    <div class="f18 c-1A1A1A">
                        {{ rankTitle }}
                    </div>
                </div>
            </template>

            <el-table :data="rankList" border>
                <el-table-column prop="rank" label="排名" />
                <el-table-column prop="name" label="用户" />
                <el-table-column prop="readCount" label="浏览量" />
                <el-table-column prop="collectCount" label="收藏量" />
                <el-table-column prop="likeCount" label="点赞量" />
                <el-table-column prop="commentCount" label="评论量" />
            </el-table>
        </CustomCard>
    </div>
</template>

<style lang="scss" scoped>
// @import './index.scss';
.page-container {
    .card {
        padding: 10px 16px;
        margin-bottom: 16px;
        border: 1px solid rgb(31 45 61 / 30%);
        border-radius: 8px;
    }
}
</style>
